<template>
  <div class="class-relation" v-loading="!async">
    <f-border
      icon="icon-5333-dasanskv"
      :title="viewModel.title"
      :desc="viewModel.description"
      v-if="async"
    >
      <div class="relation">
        <el-alert
          :title="viewModel.title + '管理说明'"
          type="info"
          show-icon
          :closable="false"
        >
          <div v-html="viewModel.intro"></div>
        </el-alert>
        <f-line title="" icon="flaticon-layers244" intro="">
          <template v-slot:headerRight>
            <div>
              <el-button
                type="primary"
                @click="addTag(null)"
                size="mini"
                :disabled="!isCanAdd"
                >新增一级{{ viewModel.title }}</el-button
              >
            </div>
          </template>
        </f-line>
        <el-table
          row-key="id"
          :data="viewModel"
          :expand-row-keys="expandKeys"
          :tree-props="{ children: 'tree', hasChildren: 'hasChildren' }"
          class="tag_table"
        >
          <el-table-column
            prop="id"
            label="ID"
            header-align="center"
            align="center"
            width="150"
          >
            <template #default="scope">
              <span v-if="scope" class="metal_color">#{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="标签名称(10个字以内)"
            header-align="center"
            align="center"
          >
            <template #default="scope">
              <el-input
                @change="edit(scope.row)"
                v-model="scope.row.name"
                size="medium"
                maxlength="10"
                placeholder="请输入标签(10个字以内)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="isEnable"
            label="是否启用"
            header-align="center"
            align="center"
            width="100"
          >
            <template #default="scope">
              <el-switch
                v-model="scope.row.isEnable"
                @change="edit(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="modifiedTime"
            label="修改时间"
            header-align="center"
            align="center"
            width="200"
          >
            <template #default="scope">
              <span v-if="scope" class="metal_color">{{
                scope.row.modifiedTime
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            header-align="center"
            align="center"
            width="200"
          >
            <template #default="scope">
              <span v-if="scope" class="metal_color">{{
                scope.row.createTime
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="action"
            label="操作"
            header-align="right"
            align="center"
            width="105"
          >
            <template #default="scope">
              <el-button
                type="text"
                icon="el-icon-plus"
                @click="addTag(scope.row)"
                :disabled="!isCanAdd"
                >加子标签</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="action"
            header-align="center"
            align="center"
            width="88"
          >
            <template #default="scope">
              <el-button
                type="text"
                v-if="!(scope.row.children && scope.row.children.length > 0)"
                size="mini"
                icon="el-icon-delete"
                @click="detele(scope.row)"
                :title="'删除标签：' + scope.row.name"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" width="50">
            <template #default>
              <i class="el-icon-rank handle"></i>
            </template>
          </el-table-column>
        </el-table>
        <div class="buttom_box">
          <el-button type="primary" :loading="loading" @click="sort"
            ><el-icon><Check /></el-icon>保 存</el-button
          >
        </div>
      </div>
    </f-border>
  </div>
</template>
<script>
// 文档 https://sortablejs.github.io/Sortable/
import Sortable from "sortablejs";
import servcie from "./service/index";

export default {
  data() {
    return {
      async: false,
      viewModel: null,
      expandKeys: [], // 展开的行
      isCanAdd: true, // 一次只能新增一个标签
      loading: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    getPath() {
      if (this.$ala.router().path.toLowerCase().includes("admin/tag")) {
        this.init();
      }
    },
    async init() {
      this.async = false;
      this.viewModel = await servcie.init();
      this.async = true;
      this.$nextTick(() => {
        this.rowDrop();
      });
    },
    // 编辑
    async edit(row) {
      this.viewModel.data = await servcie.edit(this.viewModel.data, row);
      this.isCanAdd = true;
      this.$forceUpdate();
    },
    // 添加标签
    async addTag(fatherRow) {
      this.viewModel.data = servcie.add(this.viewModel.data, fatherRow);
      if (fatherRow) {
        this.expandKeys.push(fatherRow.id.toString()); // 展开
      }
      this.isCanAdd = false;
      this.$forceUpdate();
    },
    async detele(row) {
      this.viewModel.data = await servcie.del(this.viewModel.data, row);
      this.$forceUpdate();
    },
    // 底部批量保存,只保存了排序的功能
    async sort() {
      this.isCanAdd = true;
      this.loading = true;
      var response = await this.$admin.relationSort(this.viewModel.data);
      if (response) {
        this.$ala.toast("保存成功");
      }
      this.loading = false;
    },

    // 行拖拽
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        // handle: '.handle', // handle's class
        group: "nested",
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65,
        onEnd(evt) {
          var soreResult = servcie.sort(
            _this.viewModel.data,
            evt.newIndex,
            evt.oldIndex
          );
          if (soreResult) {
            _this.viewModel.data = soreResult;
          } else {
            _this.init().then();
          }
        },
      });
    },
  },
  watch: {
    $route: "getPath",
  },
};
</script>

<style lang="scss" scoped rel="stylesheet/scss">
@import url("./var.scss");
</style>




